<template>
  <div>
    <van-tabs v-model:active="active" swipeable sticky offset-top="144">
      <van-tab title="标签 1">
        <div class="t-channel-chunk">
          <channelMovieChunk v-for="index in 20" :key="index"></channelMovieChunk>
        </div>
      </van-tab>
      <van-tab title="标签 2">
        <div class="t-row">
          <rowLine></rowLine>
        </div>
      </van-tab>
      <van-tab title="标签 3">内容 3</van-tab>
      <van-tab title="标签 4">内容 4</van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { ref } from 'vue'
import channelMovieChunk from './channelMovieChunk.vue'
import rowLine from './rowLine.vue'
export default {
  name: 'FissionFriendsH5Channeltabs',
  components: {
    channelMovieChunk,
    rowLine
  },
  setup() {
    const active = ref(0)
    const tabList = [
      { title: '精选', name: 'channelChoicenessPage' },
      { title: '综合', name: 'channelSynthesizePage' },
      { title: '话题', name: 'channelTopicPage' }
    ]
    return {
      active,
      tabList
    }
  }
}
</script>

<style lang="scss" scoped>
.t-channel-chunk {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.t-row {
  padding: 10px;
}
</style>
